<template>
    <div class="container">
        <article class="register-block">
            <el-form :model="formData" ref="vForm" :rules="rules" label-position="left" label-width="80px" size="default"
                @submit.native.prevent>
                <el-form-item label="用户名称" prop="username" class="required">
                    <el-input v-model="username" type="text" clearable></el-input>
                </el-form-item>
                <el-form-item label="用户密码" prop="password" class="required">
                    <el-input v-model="password" type="password" clearable></el-input>
                </el-form-item>
                <el-form-item label="重复密码" prop="passwordConf" class="required">
                    <el-input v-model="passwordConf" type="password" clearable></el-input>
                </el-form-item>
                <el-form-item label="手机号" prop="phone" class="required">
                    <el-input v-model="formData.phone" type="text" clearable></el-input>
                </el-form-item>
                <input class="form-control" type="button" value="发送验证码" @click="sendCode">
                <el-form-item label="验证码" prop="phoneCode">
                    <el-input v-model="formData.phoneCode" type="text" clearable></el-input>
                </el-form-item>
            </el-form>
            <div class="form-group">
                <input class="form-control" type="button" value="注册" @click="submitFormRe">
            </div>
        </article>
    </div>
</template>
<script>
import axios from '../request'
export default {
    components: {},
    props: {},
    data() {
        return {
            username: "",
            password: "",
            passwordConf: "",
            formData: {
                phone: "",
                phoneCode: ""
            },
            rules: {
                username: [{
                    required: true,
                    message: '字段值不可为空',
                }, {
                    pattern: /^[^一-龥]+$/,
                    trigger: ['blur', 'change'],
                    message: '请输入6-20位字符'
                }],
                password: [{
                    required: true,
                    message: '字段值不可为空',
                }, {
                    pattern: /^[^一-龥]+$/,
                    trigger: ['blur', 'change'],
                    message: '请输入6-20位字符'
                }],
                passwordConf: [{
                    required: true,
                    message: '字段值不可为空',
                }, {
                    pattern: /^[^一-龥]+$/,
                    trigger: ['blur', 'change'],
                    message: '请输入6-20位字符'
                }],
                phone: [{
                    required: true,
                    message: '字段值不可为空',
                }, {
                    pattern: /^[0-9]{11}$/,
                    trigger: ['blur', 'change'],
                    message: '请输入11位数字'
                }],
                phoneCode: [
                    {
                        pattern: /^[0-9]{6}$/,
                        trigger: ['blur', 'change'],
                        message: '请输入6位数字'
                    }
                ]
            },
        }
    },
    methods: {
        submitFormRe: function () {
            var that = this;
            console.info(that.formData);
            // this.$refs['vForm'].validate(valid => {
            //     console.info(valid);
            //     if (!valid) return

                window.https.get('api/checkCode',{
                    params:{
                        phone:that.formData.phone, 
                        phoneCode:that.formData.phoneCode
                    }
                }).then(res => {
                    if (res.data) {
                        console.info(JSON.stringify(res.data));
                        window.https.get('api/registerAddUser',{
                                params:{
                                username:that.username,
                                password:that.password,
                                phone:that.formData.phone
                                }
                        }).then(res =>{
                            if(res.data){
                                console.info(JSON.stringify(res.data));
                                that.$message.success("注册失败")
                            }else{
                                that.$message.error("注册成功")
                            }
                        })
                        that.$router.push("login");
                    } else {
                        that.$message.error(res.data.message);
                    }
                  // if(res.data){
                  //   that.$message.info("验证码正确，注册成功")
                  //   window.sessionStorage.setItem("userName", this.userName);
                  //   this.$router.push("index/home")
                  // }
                  // else{
                  //   that.$message.info("验证码错误，注册失败")
                  // }
                })

            // })
        },
        sendCode: function () {

            var that = this;
            // console.info(this.confPassword);
            if (this.password != this.passwordConf) {
                this.$message.error("两次密码不匹配")
                return
            } else {
                // console.info(that.formData.phone);
                //发送短信

                window.https.get('api/sendCode', {
                    params: {
                        phone: that.formData.phone
                    }
                }).then(res => {
                    if (res.data) {
                        console.info(res.data.message);
                        that.$message.success(res.data.message);
                    } else {
                        that.$message.error(res.data.message);
                    }
                })
            }
        },
    }
}
</script>
<style scoped>
.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: aliceblue;
}

.tr {
    width: 200px;
    flex-basis: 50px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background-color: beige;
    align-items: center;
}

.second {
    background-color: aqua;
}
</style>